<template>
  <div id="Account_Maintain">
    <!-- 头部标题 -->
    <div class="header">
      <span>首页 >> 账户维护</span>
    </div>
    <div class="Inner">
      <!-- 查询账户 -->
      <div class="select">
        <!-- 账号 -->
        <div class="block">
          <span>账号:</span>
          <el-input
            v-model="select.userAccount"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <!-- 账号状态 -->
        <div class="block">
          <span>账号状态:</span>
          <el-select v-model="select.userStatus" placeholder="请选择">
            <el-option
              v-for="item in accountStatus"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </div>
        <!-- 角色 -->
        <div class="block">
          <span>角色:</span>
          <el-select v-model="select.userRoleId" placeholder="请选择">
            <el-option
              v-for="item in Roles"
              :key="item.roleId"
              :label="item.roleName"
              :value="item.roleName"
            >
            </el-option>
          </el-select>
        </div>
        <el-button @click="loginLike" type="primary">查询</el-button>
      </div>
      <!-- 添加账户 -->
      <div class="newAccount" @click="addLoginFormVisible = true">
        <i class="el-icon-circle-plus-outline"></i>
        <span>添加账户</span>
      </div>
      <!-- 表格 -->
      <div class="table">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="login.userAccount" label="账号" width="180">
          </el-table-column>
          <el-table-column
            prop="userInfo.userName"
            label="员工姓名"
            width="180"
          >
          </el-table-column>
          <el-table-column prop="login.userStatus" label="状态" width="90">
            <template slot-scope="scope">
              <span v-if="scope.row.login.userStatus == 0">正常</span>
              <span v-else>已锁定</span>
            </template>
          </el-table-column>
          <el-table-column prop="role.roleName" label="角色" width="160">
          </el-table-column>
          <el-table-column label="操作列表" width="200">
            <template slot-scope="scope">
              <div class="tableBtn">
                <!-- 删除按钮 -->
                <el-popconfirm
                  title="确定删除此账户吗？"
                  @confirm="deleteEmp(scope.$index)"
                >
                  <el-button
                    slot="reference"
                    type="danger"
                    icon="el-icon-delete"
                    circle
                  ></el-button>
                </el-popconfirm>
                <!-- 修改按钮 -->
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  @click="loginEditBtn(scope.$index)"
                ></el-button>
                <!-- 查看详情按钮 -->
                <el-button icon="el-icon-search" circle></el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        :current-page.sync="assignGroupSearch.pageNo"
        :page-size="assignGroupSearch.rows"
        :page-sizes="[10, 20, 50, 100]"
        layout="sizes, total, prev, pager, next"
        :total="assignGroupSearch.total"
        @size-change="(e) => tableSizeChange(e)"
        @current-change="(e) => tableCurrentChange(e)"
      >
      </el-pagination>
      <!-- 添加账户弹窗 -->
      <div class="addForm">
        <el-dialog
          title="账户新增"
          width="650px"
          :visible.sync="addLoginFormVisible"
        >
          <!-- 账号 -->
          <div class="emptwo">
            <span>账号</span>
            <el-input
              v-model="addData.login.userAccount"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 员工密码 -->
          <div class="empId">
            <span>员工密码</span>
            <el-input
              v-model="addData.login.userPwd"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 员工姓名 -->
          <div class="empId">
            <span>员工姓名</span>
            <el-input
              v-model="addData.userInfo.userName"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 状态 -->
          <div class="emptwo">
            <span>状态</span>
            <el-select v-model="addData.login.userStatus" placeholder="请选择">
              <el-option
                v-for="item in accountStatus"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 角色 -->
          <div class="emptwo">
            <span>角色</span>
            <el-select v-model="addData.role.roleName" placeholder="请选择">
              <el-option
                v-for="item in Roles"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleName"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 底部按钮 -->
          <div slot="footer" class="dialog-footer">
            <el-button @click="addLoginFormVisible = false">取 消</el-button>
            <el-button @click="loginAdd()" type="primary">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <!-- 修改账户弹窗 -->
      <div class="addForm">
        <el-dialog
          title="账户修改"
          width="650px"
          :visible.sync="editLoginFormVisible"
        >
          <!-- 账号 -->
          <div class="emptwo">
            <span>账号</span>
            <el-input
              v-model="addData.login.userAccount"
              placeholder="请输入内容"
              :disabled="true"
            ></el-input>
          </div>
          <!-- 员工密码 -->
          <div class="empId">
            <span>员工密码</span>
            <el-input
              v-model="addData.login.userPwd"
              placeholder="默认不写为不修改"
            ></el-input>
          </div>
          <!-- 员工姓名 -->
          <div class="empId">
            <span>员工姓名</span>
            <el-input
              v-model="addData.userInfo.userName"
              placeholder="请输入内容"
            ></el-input>
          </div>
          <!-- 状态 -->
          <div class="emptwo">
            <span>状态</span>
            <el-select v-model="addData.login.userStatus" placeholder="请选择">
              <el-option
                v-for="item in accountStatus"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 角色 -->
          <div class="emptwo">
            <span>角色</span>
            <el-select v-model="addData.role.roleName" placeholder="请选择">
              <el-option
                v-for="item in Roles"
                :key="item.roleId"
                :label="item.roleName"
                :value="item.roleName"
              >
              </el-option>
            </el-select>
          </div>
          <!-- 底部按钮 -->
          <div slot="footer" class="dialog-footer">
            <el-button @click="editLoginFormVisible = false">取 消</el-button>
            <el-button @click="loginEdit()" type="primary">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>


<script>
import {
  getAllLogin,
  likeLogin,
  addLogin,
  editLogin,
} from "@/api/SystemAPI/accMainAPI";
import { getRoles } from "@/api/SystemAPI/roleAPI";
export default {
  name: "AccountMaintain",
  data() {
    return {
      // 选择条件
      select: {
        userAccount: "",
        userStatus: "",
        userRoleId: "",
      },
      // 账号状态选项
      accountStatus: ["正常", "锁定"],
      // 角色选项
      Roles: [
        {
          roleId: "",
          roleName: "",
        },
      ],
      // 表格数据
      tableData: [
        {
          login: {
            userId: "",
            userAccount: "",
            userPwd: "",
            userName: "",
            userStatus: "",
          },
          userInfo: {
            userName: "",
          },
          role: {
            roleName: "",
          },
        },
      ],
      // 弹窗数据
      addData: {
        login: {
          userId: "",
          userAccount: "",
          userPwd: "",
          userName: "",
          userStatus: "",
        },
        userInfo: {
          userName: "",
        },
        role: {
          roleName: "",
        },
      },
      // 是否显示弹窗
      addLoginFormVisible: false,
      // 修改弹窗
      editLoginFormVisible: false,
      detailList: [],
      assignGroupSearch: {
        pageNo: 1, // 页数
        rows: 10, // 每页展示条数
        total: 0, // 总数
      },
    };
  },
  methods: {
    // 获取账户信息
    getData: function () {
      getAllLogin().then((res) => {
        if (res.code === 200) {
          this.detailList = res.data;
          this.assignGroupSearch.total = res.data.length;
        }
      });
    },
    // 获取所有角色信息
    AllRole: function () {
      getRoles().then((res) => {
        if (res.code === 200) {
          this.Roles = res.data;
        }
      });
    },
    // 模糊查询
    loginLike: function () {
      if (
        this.select.userAccount == "" &&
        this.select.userStatus == "" &&
        this.select.userRoleId == ""
      ) {
        this.getData();
      }
      let roId = -1;
      for (let i = 0; i < this.Roles.length; i++) {
        if (this.Roles[i].roleName == this.select.userRoleId) {
          roId = this.Roles[i].roleId;
        }
      }
      let status = this.select.userStatus == "正常" ? 0 : 1;
      if (this.select.userStatus == "") {
        status = -1;
      }
      const data = {
        userAccount: this.select.userAccount,
        userStatus: status,
        userRoleId: roId,
      };
      likeLogin(data).then((res) => {
        if (res.code === 200) {
          this.tableData = res.data;
        }
      });
    },
    // 添加账户
    loginAdd: function () {
      let status = this.addData.login.userStatus == "正常" ? 0 : 1;
      const newLogin = {
        login: {
          userAccount: this.addData.login.userAccount,
          userPwd: this.addData.login.userPwd,
          userName: this.addData.login.userName,
          userStatus: status,
        },
        userInfo: {
          userName: this.addData.userInfo.userName,
        },
        role: {
          roleName: this.addData.role.roleName,
        },
      };
      addLogin(newLogin).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "添加成功",
            type: "success",
          });
          this.addLoginFormVisible = false;
          this.getData();
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 清空弹窗内容
    addClear: function () {
      const temp = {
        login: {
          userId: "",
          userAccount: "",
          userPwd: "",
          userName: "",
          userStatus: "",
        },
        userInfo: {
          userName: "",
        },
        role: {
          roleName: "",
        },
      };
      this.addData = temp;
    },
    // 修改账户按钮
    loginEditBtn: function (index) {
      this.addData = JSON.parse(JSON.stringify(this.tableData[index]));
      this.addData.login.userStatus =
        this.addData.login.userStatus == 0 ? "正常" : "已锁定";
      this.addData.login.userPwd = "";
      this.editLoginFormVisible = true;
    },
    // 修改账户
    loginEdit: function () {
      let status = this.addData.login.userStatus == "正常" ? 0 : 1;
      const newLogin = {
        login: {
          userId: this.addData.login.userId,
          userAccount: this.addData.login.userAccount,
          userPwd: "",
          userName: this.addData.login.userName,
          userStatus: status,
        },
        userInfo: {
          userName: this.addData.userInfo.userName,
        },
        role: {
          roleName: this.addData.role.roleName,
        },
      };
      editLogin(newLogin).then((res) => {
        if (res.code === 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.editLoginFormVisible = false;
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
    // 跳页
    tableCurrentChange(e) {
      this.assignGroupSearch.pageNo = e;
      this.getData();
      setTimeout(() => {
        this.tableData = this.detailList.slice((e - 1) * 10, e * 10);
      }, 500);
    },
    // 每页展示条数变更
    tableSizeChange(e) {
      this.assignGroupSearch.rows = e;
      this.assignGroupSearch.pageNo = 1;
      this.getData();
      setTimeout(() => {
        this.tableData = this.detailList.slice(0, 10);
      }, 500);
    },
  },
  mounted() {
    this.getData();
    setTimeout(() => {
      this.tableData = this.detailList.slice(0, 10);
    }, 500);
    this.AllRole();
  },
};
</script>

<style lang="less" scoped>
#Account_Maintain {
  // 头部导航栏
  .header {
    background-color: deepskyblue;
    display: flex;
    height: 30px;
    align-items: center;
  }
  // 底部信息
  .Inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    // 搜索
    .select {
      display: flex;
      flex-direction: row;
      margin-top: 20px;
      .block {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-right: 20px;
        .el-input,
        .el-select {
          margin-left: 5px;
          width: 200px;
        }
      }
    }
    // 添加
    .newAccount {
      margin-top: 20px;
      width: 90px;
      cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: center;
      i {
        font-size: 20px;
        margin-right: 2px;
      }
    }
    // 表格
    .table {
      margin-top: 20px;
      ::v-deep .el-table th {
        background-color: bisque;
      }
      ::v-deep .el-table__cell {
        border: 3px double gray;
      }
      ::v-deep .el-table__cell.gutter {
        background-color: white;
        border: none;
      }
      .tableBtn {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
      }
    }
    .addForm {
      display: flex;
      flex-direction: column;
      .el-input,
      .el-textarea {
        width: 496px;
      }
      .empId,
      .emptwo {
        margin-bottom: 20px;
        display: flex;
        flex-direction: row;
        align-items: center;
        .el-input,
        .el-select,
        .el-textarea {
          margin-left: 30px;
        }
      }
      .emptwo {
        .el-input,
        .el-select,
        .el-textarea {
          margin-left: 58px;
        }
      }
    }
  }
}
</style>